<template>
	<view>
		<web-view ref="webview" :src="url"></web-view>
		<u-popup v-model="show" mode="center" border-radius="20" width="80%">
			<view class="comment">
				<u-rate 
					:count="5" 
					v-model="star" 
					size="60" 
					active-color="#FFD700" 
					gutter="15"
					inactive-icon="star-fill"
				></u-rate>
				<u-input class="mb30" v-model="comment" type="textarea" :clearable="false" :border="true" :height="200" maxlength="-1" />
				<u-button type="primary" @click="submit">提交</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				url: '',
				show: false,
				star: 0,
				comment: '',
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.text == '点评') {
				this.show = true
			}
		},
		onLoad(options) {
			this.id = options.id
			if (options.url) {
				options.url += (options.url.indexOf('?') === -1 ? '?' : '&') + 'token=' + this.$store.state.token
			}
			this.url = options.url
		},
		methods: {
			submit() {
				if (this.star == 0) {
					uni.showToast({
						title: '请至少选择一个星级',
						icon: 'none',
					})
					return false
				}
				if (this.comment == '') {
					uni.showToast({
						title: '请输入点评内容',
						icon: 'none',
					})
					return false
				}
				uni.showLoading({
					title: '提交中...',
					mask: true,
				})
				this.$u.post(this.$u.api.curriculumComment, {
					lessonId: this.id,
					star: this.star,
					comment: this.comment,
				}).then((res) => {
					uni.hideLoading()
					this.show = false
					uni.showToast({
						title: '点评提交成功',
						icon: 'none',
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}).catch((err) => {
					uni.hideLoading()
					let msg = err.msg || '点评提交失败，请稍后再试'
					uni.showToast({
						title: msg,
						icon: 'none',
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.comment {
		padding: 30rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		
		.u-rate {
			width: 100%;
			justify-content: center;
			margin-bottom: 30rpx !important;
		}
	}
</style>
